<template>
	<app-layout>
		<!-- 店铺列表 -->
		<view class="liststore">
			<view class="liststore-item" @click="toApply(item.store.mch_id)" v-for="(item,index) in list" :key="index">
				<view class="avatar">
					<image :src="item.store.cover_url" mode="widthFix"></image>
				</view>
				<view class="name">
					{{item.store.name}}
				</view>
				<view class="vnum">
					已开精品店{{item.vdiannum}}个
				</view>
			</view>
		</view>

		<view class="no-content" v-if="!list || list.length === 0">暂无店铺记录</view>
		<!-- 返回顶部 -->
		<view class="quick-box dir-top-nowrap" style="bottom: 180rpx" v-if="opacity == 1">
			<image @click="backTop" class="quick-btn" src="../../static/image/icon/back-top.png"></image>
		</view>
	</app-layout>
</template>
<script>
	import {
		mapState,
	} from "vuex";

	export default {
		name: "list",
		data() {
			return {
				mch_id: 1,
				page: 1,
				limit: 20,
				list: [],
				keyword: '',
				page_count: '',
				// 返回顶部
				top: 400,
				scrollTop: 0,
				opacity: 0
			}
		},
		onLoad: function() {
			this.loadData()
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: {
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
		},
		onReachBottom: function() {
			const self = this;
			if (self.page_count > self.page) {
				self.page++
				self.loadData()
			} else {
				/* let warehouselist = self.$storage.getStorageSync('warehouselist')
				if (warehouselist) {
					self.list = self.list.concat(warehouselist)
				} else {
					self.page = 1
					self.loadData()
				} */
			}
		},
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			},
		},
		methods: {
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			loadData() {
				const self = this;
				self.$showLoading();
				self.$request({
					url: self.$api.boutique.list,
					data: {
						page: self.page,
						limit: self.limit
					}
				}).then(res => {
					self.$hideLoading();
					self.list = self.list.concat(res.list);
					self.page_count = res.pagination.page_count
					self.$storage.setStorageSync('warehouselist', self.list)
				}).catch(res => {
					self.$hideLoading();
				})
			},
			toApply(mch_id) {
				uni.navigateTo({
					url: '/pages/bepartner/apply/apply?mch_id=' + mch_id
				})
			},
			beSearch: function(e) {
				if (this.keyword.length === 0) {
					this.toSearch = !this.toSearch;
					this.getFocus = this.toSearch;
				}
			},
			//搜索
			bindConfirm() {
				[
					this.page,
					this.mch_common_cat_id,
					this.catModel,
					this.list
				] = [
					1,
					0,
					false,
					[]
				]
				this.loadData();
			},

			cat(id) {
				[this.mch_common_cat_id, this.list, this.page, this.catModel] = [id, [], 1, false];
				this.loadData();
			},

			changeCat() {
				this.catModel = !this.catModel;
			},

			bindInput: function(e) {
				this.keyword = e.detail.value;
			},

			cancelPrint() {
				this.keyword = '';
				this.toSearch = false;
				this.bindConfirm();
			},
		},
	}
</script>
<style scoped lang="scss">
	.search-content {
		height: #{56rpx};
		border-radius: #{28rpx};
		background: #fff;
		position: relative;
		width: 100%;
		margin-left: #{24rpx};

		.input {
			height: #{56rpx};
			border-radius: #{28rpx};
			color: #353535;
			width: 90%;
			background-color: #ffffff;
		}

		.icon-search {
			background-image: url("../../static/image/icon/icon-search.png");
			height: #{24rpx};
			width: #{24rpx};
			background-size: 100% auto;
			margin-right: #{10rpx};
			background-repeat: no-repeat;
		}
	}

	.search-text {
		color: #b2b2b2;
		font-size: #{24rpx};
		margin: 0 #{5rpx};
	}

	.liststore {

		.liststore-item {
			width: 686rpx;
			// height: 441rpx;
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			margin: 32rpx auto;

			.avatar {
				width: 100%;
				// height: 360rpx;

				video {
					width: 100%;
					height: 100%;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				padding: 0 32rpx;
				line-height: 60rpx;
			}

			.vnum {
				font-size: 24rpx;
				color: #c8c8c8;
				padding: 0 32rpx;
				line-height: 60rpx;
			}
		}
	}

	.list-head {
		position: fixed;
		top: 0;
		z-index: 1;
		width: 100%;
	}

	.no-content {
		color: #888;
		padding: #{100rpx} 0 0 0;
		text-align: center;
	}

	.mch-list-input {
		height: #{88rpx};
		padding: 0 #{24rpx};
		background: #EFEFF4;


		.box {
			margin-right: #{24rpx};
			height: #{56rpx};
			border-radius: #{28rpx};
			background: #FFFFFF;

			input {
				border-radius: #{28rpx};
			}
		}

		.icon-cats {
			// background-image: url("./../image/list-cat.png");
			background-repeat: no-repeat;
			background-size: 100% auto;
			height: #{30rpx};
			width: #{38rpx};
		}

		.close-word {
			height: #{56rpx};
			width: #{70rpx};
			position: absolute;
			right: 0;
			top: 0;
			z-index: 20;

			.icon-close {
				background-image: url("../../static/image/icon/icon-close.png");
				background-repeat: no-repeat;
				background-size: 100% auto;
				height: #{25rpx};
				width: #{25rpx};
			}
		}
	}

	.list-cat-model {
		padding-top: #{12rpx};
		padding-bottom: #{12rpx};
		padding-left: #{20rpx};
		background: #f7f7f7;

		.cat-name {
			color: #353535;
			font-size: #{24rpx};
			border: #{1rpx} solid #e7e7e7;
			border-radius: #{28rpx};
			line-height: #{56rpx};
			height: #{56rpx};
			background: #ffffff;
			padding: 0 #{24rpx};
			margin: #{10rpx} #{12rpx} #{10rpx} #{12rpx};
		}
	}

	.gap {
		height: #{88rpx};
	}

	.list-shop {
		margin: #{10rpx} #{20rpx};
		width: #{710rpx};
		background: #fff;
		border-radius: #{16rpx};
	}

	.list-shop .shop-info {
		padding-right: #{24rpx};
	}

	.list-shop .distance {
		align-self: flex-start;
		padding-top: #{36rpx};
		font-size: #{24rpx};
		color: #999999;
		padding-right: #{50rpx};
	}

	.list-shop .list-shop-icon {
		border-radius: #{8rpx};
		height: #{100rpx};
		width: #{100rpx};
		margin: #{24rpx};
	}

	.list-shop .name {
		color: #353535;
		font-size: #{28rpx};
		margin-bottom: #{24rpx};
	}

	.list-shop .shop {
		font-size: #{24rpx};
		color: #999;
	}

	.list-shop .goods-num {
		padding-right: #{32rpx};
	}

	.list-shop .goods {
		padding-bottom: #{24rpx};
		margin: 0 #{16rpx};
	}

	.list-shop .goods-box {
		margin: 0 #{8rpx};
	}

	.list-shop .goods-info {
		position: relative;
		height: #{210rpx};
		width: #{210rpx};
	}

	.list-shop .goods-info view {
		background: #fff;
		font-size: #{28rpx};
		opacity: 0.8;
		width: #{210rpx};
		color: #ff4544;
		height: #{50rpx};
		position: absolute;
		bottom: 0;
	}

	.list-shop .goods-info image {
		height: 100%;
		width: 100%;
	}

	// 返回顶部
	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}
</style>
